// 入口文件
console.log('OK')

// document.addEventListener('touchstart', function(event) {
//     // 判断默认行为是否可以被禁用
//     if (event.cancelable) {
//         // 判断默认行为是否已经被禁用
//         if (!event.defaultPrevented) {
//             event.preventDefault();
//         }
//     }
// }, false);
// 加载vue
import Vue from 'vue'
//加载router路由
import router from './router.js'
//加载APP.vue (最大的组件，router路由里面的组件都在APP里挂在着)
import app from './App.vue'

//引入mint-ui中的header组件 （按需加载）
import { Header,Swipe, SwipeItem, Button,Lazyload,Switch   } from 'mint-ui'
Vue.component(Header.name, Header);
//轮播图按需导入
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);
Vue.component(Switch.name, Switch);

//引入mui文件中文的css文件
import './lib/mui/css/mui.min.css'
//引入mui框架中的字体图标css文件
import './lib/mui/css/icons-extra.css'
//引入了之后缺少文字模块，所以我们引入文字
import './lib/mui/fonts/mui-icons-extra.ttf'

//加载vue-router模块，然后vue.use()配置模块
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//由于需要发送ajax请求，所以需要装vue-resource,并且引进来
import VueResource from 'vue-resource'
Vue.use(VueResource)

//全局配置post的请求配置文件
Vue.http.options.emulateJSON = true;
//vue-preview是vue提供的缩略图方式，引入并配置

import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)

//定义一个全局的过滤器
Vue.filter('filters',function(msg,mrg){
    var dt= new Date(msg)
    var y= dt.getFullYear()
    var m= dt.getMonth()
    var d= dt.getDate()
    var h= dt.getHours()
    var mi= dt.getMinutes()
    var s= dt.getSeconds()
    var time= `${y}-${m}-${d}`
    var time2=`${y}-${m}-${d} ${h}:${mi}:${s}`
    if(mrg === 'yyyy-mm-ss'){
        return time
    }else{
        return time2
    }
    
    console.log(time)   
})
//加载vuex并进行配置
import Vuex from 'vuex'
Vue.use(Vuex)
//创建一个store对象
//在这里页面加载的时候是从上到下的，所以在这里我们可以回去本地存储的car数据
 var car= JSON.parse(localStorage.getItem('car') || '[]')
var store= new Vuex.Store({
    state:{
        //在这里定义一个car，目的是为了存放购物车里的商品的
        car: car //后面这个car是上面在本地获取的本地存储的数据
    },
    mutations: {
        //这里定义一个方法，是存储state 里car的数据的
        StoreCar: function(state,obj){
            //这里是查找购物车里有没有相同的物品，如果有，则需要将传过来的数量合并
            var flag= false 
            state.car.some(function(item,i){
                if(item.id === obj.id){
                    flag= true
                    // console.log(item.count)
                    item.count += obj.count
                    return true
                }
            })
            //判断里面是否有同样的商品，如果有则数量相加，如果没有对象追加到数组中
            if(!flag){
                state.car.push(obj)
            }
            //将购物车里面的数据持久化保存到本地
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //通过id, 修改购物车商品的数量,这个是通过监听input输入框的值的变化来控制car中的count的数量的变化，并将car存储在本地中
        updataCouunt: function(state,obj){
            
            state.car.forEach((item,i)=>{
                if(item.id === obj.id){
                    item.count=  parseInt(obj.value)
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //通过id删除car中的元素
        reomveById: function(state,id){
            state.car.some((item,i)=>{
                if(item.id == id){
                    state.car.splice(i,1)  
                    return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car)) 
        },
        selectChange: function(state,obj){
            state.car.some((item,i)=>{
                if(item.id == obj.id){
                    item.selectd= obj.value
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))  
        }
    },
    getters: {
        //获取购物车里面的数量
        getAllCount: function(state){
            var sum= 0
            state.car.forEach(function(item,i){
                sum += item.count
            })
            return sum
        },
        getIdByCar: function(state){
            var carId = []
            state.car.forEach(function(item,i){
                carId.push(item.id)
            })
            return carId
        },
        getCount: function(state){
            //由于想要拿到car中的每一项的count的值，所以，我们可以这样做，定义一个空数组，然后将id作为空数组的键，
            // count作为空数组的值，拿到这个值之后再返回出去
            var o= {} 
            state.car.forEach(function(item,i){
                o[item.id]= item.count
            })
            return o
        },
        getSelect: function(state){
            //获取select的值
            var k= {}
            state.car.forEach((item,i)=>{
                k[item.id]= item.selectd
            })
            return k 
        },
        getAllCountAndPrice: function(state){
            var c= 0 //总件数
            var p= 0 //总价钱
            state.car.forEach((item)=>{
                if(item.selectd){
                    c += item.count
                    p += item.price * item.count
                }
            })
            return {c: c, p: p}
        }
    }
})


//创建vm实例对象
var vm = new Vue({
    el: '#app',
    render: function(c){
        return c(app)
    },
    router: router,
    store: store
})
